<template>
	<view>
		<view class="top-banner">
			开通会员让您有更多的曝光和权益，助您极速交友脱单。
		</view>
		<view class="content">
			会员说明：
			<view class="card junior">
				<view class="title">
					<span>初识：</span>
					<span>399元（约认识4-10人）</span>
				</view>
				<view class="text">
					3个月会员权益（专属vip标识+搜索排名靠前）+赠送1000点缘分值
				</view>
			</view>
			<view class="card midium">
				<view class="title">
					<span>结缘：</span>
					<span>599元（约认识8-20人）</span>
				</view>
				<view class="text">
					6个月会员权益（专属vip标识+搜索排名靠前+可申请公众号信息曝光）+赠送2000点缘分值
				</view>
			</view>
			<view class="card senior">
				<view class="title">
					<span>恨晚：</span>
					<span>999元（约认识20-40人）</span>
				</view>
				<view class="text">
					12个月会员权益（专属vip标识+搜索排名靠前+可申请公众号信息曝光+申请平台牵线2次）+赠送4000点缘分值。
				</view>
			</view>
			<view class="">
				客服二维码
				<view class="QRcode">
					<img :src="QRCode" width='200px' height='200px' alt="">
				</view>
				<view class="text" style="margin-top:20px;color:#aaa">
					若您属于特殊群体人士（特指肢体、语言、听力存在长期缺损但仍有劳动能力的人群、因公牺牲军人配偶及子女，病故军人配偶及子女），请及时联系本平台，我们将会为你提供公益性交友援助。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		data() {
			return {
				QRCode: '',
			};
		},
		onLoad() {
			request(url.getCommonVal, 'GET', {
				codeName: 'CUSTOMER_SERVICE_CODE'
			}).then(res => {
				if (res.status === 200) {
					this.QRCode = res.data.codeValue
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.QRcode {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-banner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 44px;
		background: linear-gradient(-41deg, rgba(49, 104, 174, 0.57), rgba(145, 83, 188, 0.57));
		font-size: 13px;
		font-family: SimHei;
		color: #FFFFFF;
		line-height: 19px;
	}

	.content {
		padding: 10px 18px;
		margin-top: 10px;
		background-color: #fff;
		color: #888;

		.card {
			margin: 20px 7px;
			border-radius: 10px;
			color: #fff;
			padding: 18px;

			.title {
				font-size: 17px;
			}

			.text {
				margin-top: 16px;
				font-size: 13px;
			}
		}

		.junior {
			// background: #C09DD9;
			background: url('./images/lv1.png') no-repeat center/cover;
		}

		.midium {
			// background: #A1A4D4;
			background: url('./images/lv2.png') no-repeat center/cover;
		}

		.senior {
			// background: #8AA9D1;
			background: url('./images/lv3.png') no-repeat center/cover;
		}
	}
</style>
